<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人信息</title>
		<style type="text/css">
			.error_input {
				color: red;
				font-weight: bold;
				border: 1px solid red;
			}

			.error_message {
				color: red;
				margin-left: 30px;
			}

			body {
				background-image: url(../../image/bg1.webp);
				background-repeat: no-repeat;
				background-size: 100%;
				width: 100%;
				height: 100%;
			}

			/* .a1{
				background-image: url(img/bg5.jpg) ;
				background-repeat: no-repeat;
				background-size: 100%;
				width: 100%;
				height: 100%;
			} */
			.top {
				width: 100%;
				height: 80px;
				/* border-bottom: 1px solid white; */
			}

			.top1 {
				width: 200px;
				height: 70px;
				line-height: 70px;
				display: inline-block;
				color: #cccccc;
				font-size: 28px;
				margin-left: 360px;
			}

			.top2 {
				display: inline-block;
				color: white;
				margin-left: 200px;
			}

			.top a {
				color: #7e7979;
				text-decoration: none;
			}

			.main {
				width: 800px;
				height: 529px;
				background-color: white;
				opacity: 0.9;
				border: 1px solid #888888;
				border-radius: 20px;
				margin: 10px auto;
				font-size: 17px;
				overflow: auto;
				overflow-x: hidden;
				overflow-y: auto;


			}

			.main span {
				display: inline-block;
			}

			.main1 {
				width: 800px;
				height: 165px;
			}

			.m1_img {
				width: 130px;
				height: 130px;
				border-radius: 50%;
				overflow: hidden;
				margin: 10px auto;
				display: inline-block;
				margin-left: 20px;
			}

			.m1_img img {
				position: absolute;
				width: 131px;
				height: 131px;
				border-radius: 50%;
				overflow: hidden;
				top: 109px;
				left: 389px;
			}

			.m1 {
				display: inline-block;
				width: 557px;
				float: right;
				padding-bottom: 20px;
				padding-left: 30px;
				padding-top: 100px;
				border-bottom: 1px solid #999999;
				position: relative;
				/* background-color: aqua; */
			}

			.m1_1 {
				padding-left: 0px;
			}

			.m1_in {
				position: absolute;
				top: 30px;
				left: 446px;
			}

			.m1_in input {
				margin-top: 20px;
			}

			.main2 {
				width: 800px;
				height: 90px;
				line-height: 90px;
				border-bottom: 1px solid #999999;
				clear: both;
			}

			.main2_l {
				width: 100px;
				height: 61px;
				line-height: 75px;
				padding-left: 70px;
			}

			.main2_r {
				width: 200px;
				text-align: center;
				margin-left: 35px;
			}

			.bo {
				width: 600px;

			}

			.bo input {
				margin-left: 638px;
				margin-top: 17px;
			}

			.foot {
				width: 800px;

			}

			.foot1 {
				width: 800px;
				height: 50px;
				padding-left: 68px;
				line-height: 75px;

			}

			.foot2 {
				text-align: center;
				padding-top: 20px;
				margin-left: 5px;
				margin-bottom: 10px;
			}

			.bo table {
				margin: 0 auto;
				width: 777px;
				background-color: white;
				opacity: 0.9;
				border-radius:10px ;
				border: 1px solid #333333;
			}

			.bo table tr {

			}

			.bo table tr td {
				width: 50px;
				height: 50px;
				border: 1px solid #999999;
			}

			.bo table tr:first-child td:first-child {
				border-radius: 10px 0 0 0;
			}

			.bo table tr:first-child td:last-child {
				border-radius: 0 10px 0 0;
			}

			.bo table tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}

			.bo table tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}

			.fo {
				width: 800px;
				margin: 20px auto;
				font-size: 10px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			.choose_pic{
				position: absolute;
				margin-top: 118px;
				left: 390px;
			}
		</style>
	</head>
	<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../../js/validation.js"></script>
	<script type="text/javascript">
		<!-- 提交前表单校验 -->
		function checkSubmit(){
			var result = true;
			var r1 = checkEmpty1('#user_name','#errUsername');
			var r2 = checkSex('#user_sex','#errSex');
			var r3 = checkTelephone('#user_tel','#errTel');
			var r4 = checkEmpty1('#user_addr','#errAddr');
			var r5 = null;
			if($("#isPictureModified").val() == "1"){
				r5 = checkFile1('#picture', '#errImage');
			}else{
				r5 = true;
			}
			if (r1 && r2 && r3 && r4 && r5) {
				return true;
			} else {
				return false;
			}
		}
		function selectPicture(){
			checkFile1('#picture', '#errImage');
			$("#user_picture").hide();
			$("#isPictureModified").val(1);
		}
	</script>
	<body>
		<div class="a1">
			<div class="top">
			<div class="top1">
				<a href="#">我的拍卖网</a>
			</div>
			<div class="top2">
				<a href="../../homepage.jsp">首页</a>
			</div>
		</div>
		<div class="main">
			<form action="/user?method=updateInfo" method="post"
				  autocomplete="off" enctype="multipart/form-data"
				  onsubmit = "return checkSubmit()">
				<div class="main1">
					<div class="m1_img">
						<span id="errImage"></span><br/>
						<input type="hidden" id="isPictureModified" name="isPictureModified" value="0">
						<img id="user_picture" src="${userList.user_head}" >
						<input class="choose_pic" id="picture" name="picture" type="file" style="padding-left:0px;" accept="image/*"
							   onchange="selectPicture()"/>
					</div>
					<div class="m1">
						<div class="m1_1">
							<span class="">用&nbsp;&nbsp;户&nbsp;名</span>
							<span id="errUsername"></span>
							<input id="user_name" name="user_name" class="main2_r" value="${userList.user_name}"
								   onblur="checkEmpty1('#user_name','#errUsername')"></input>
						</div>
					</div>
				</div>
				
				<div class="main2">
					<span class="main2_l">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
					<span id="errSex"></span>
					<input id="user_sex" name="user_sex" class="main2_r" value="${userList.user_sex}"
						   onblur="checkSex('#user_sex','#errSex')"></input>
				</div>
				<div class="main2">
					<span class="main2_l">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</span>
					<span id="errTel"></span>
					<input id="user_tel" name="user_tel" class="main2_r" value="${userList.user_tel}"
						   onblur="checkTelephone('#user_tel','#errTel')"></input>
				</div>
				<div class="main2">
					<span class="main2_l">收货地址</span>
					<span id="errAddr"></span>
					<input id="user_addr" name="user_addr" class="main2_r" value="${userList.user_addr}"
						   onblur="checkEmpty1('#user_addr','#errAddr')"></input>
				</div>
				<div class="bo">
					<input type="hidden" id="user_id" name="user_id" value="${userList.user_id}">
					<input type="submit" value="确认修改"/>
				</div>
			</form>
		</div>
		</div>
		<div class="foot">
			
		</div>
		<div class="fo">
			@Copyright 园中葵 2020
		</div>
	</body>
</html>
